<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>课程信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.course {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.course-info {
			width: 96%;
			height: 100px;
			margin: 10px 2%;
			border-radius: 5px;
			background-color: white;
		}

		.image {
			padding: 5px;
			display: inline-block;
		}

		.image img {
			width: 90px;
			height: 90px;
		}

		.info {
			width: calc(100% - 105px);
			height: 100px;
			margin-top: -30px;
			display: inline-block;
		}

		.info-title {
			height: 24px;
			font-size: 18px;
			letter-spacing: 0.2em;
			font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.info-num,
		.info-hour {
			font-size: 12px;
			width: 5em;
			color: #C2C2C2;
			height: 24px;
			display: inline-block;
		}

		.info-state {
			font-size: 14px;
			padding: 3px 5px;
			color: white;
			font-weight: bold;
			background-color: limegreen;
			border-radius: 5px;
			display: inline-block;
		}

		.conduct {

			background-color: #b5b5b5;
		}

		.conduct1 {
			background-color: #69BBF4;
		}

		.abort {
			background-color: #EC2D0C;
		}

		.end {
			background-color: #C2C2C2;
		}

		.info-money {
			font-size: 18px;
			font-weight: bold;
			color: red;
			height: 24px;
		}

		.course-teacher,
		.course-details,
		.choose-meun {
			width: calc(100% - 20px);
			margin-top: 10px;
			padding: 10px;
			background-color: white;
		}

		.title {
			font-size: 14px;
			padding-left: 10px;
			font-weight: bold;
			border-left: 2px solid #64B7FB;
		}

		.teacher {
			display: inline-block;
		}

		.teacher-photo {
			width: 4em;
			height: 4em;
			border-radius: 50%;
		}

		.teacher-photo img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.teacher-name {
			width: 5em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 14px;
			margin-left: 2em;
		}

		.details-title {
			font-size: 14px;
			padding-left: 2em;
			display: inline-block;
		}

		.details-info {
			font-size: 15px;
			display: inline-block;
		}

		.choose-meun {
			padding: 10px 0;
			width: 100%;
			text-align: center;
		}

		.choose-title {
			width: calc(100% / 3.1);
			text-align: center;
			padding: 5px 0;
			display: inline-block;
		}

		.cur {
			color: #64B7FB !important;
			border-bottom: 2px solid #64B7FB;
		}

		.pages {
			width: calc(100% - 30px);
			padding: 0 15px;
			background-color: white;
			padding-bottom: 60px;
		}

		.button {
			height: 50px;
			width: 100%;
			position: fixed;
			bottom: 0;
			font-size: 20px;
			font-weight: bold;
			letter-spacing: 5px;
			color: white;
			line-height: 50px;
			text-align: center;
			background-color: #64B7FB;
		}

		.time-title {
			font-size: 14px;
			font-weight: bold;
			padding-left: 2em;
		}

		.time-info {
			font-size: 15px;
			padding-left: 3em;
		}

		.state {
			font-size: 16px;
			color: white;
			width: 80%;
			margin: 10px 10%;
			padding: 5px 0;
			border-radius: 3px;
			background-color: #C2C2C2;
			text-align: center;
		}

		.normal {
			background-color: green !important;
		}

		.abnormal {
			background-color: red;
		}

		.tips {
			font-size: 14px;
			color: #C0C4CC;
		}

		.name-list {
			width: 100%;
			margin-top: 15px;
		}

		.name {
			width: 4em;
			display: inline-block;
			background-color: green;
			text-align: center;
			line-height: 30px;
			border-radius: 5px;
			padding: 0.2em 0.5em;
			margin: 5px;
			height: 30px;
			color: white;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.abnormal {
			background-color: #E4644B;
		}


		.choose {
			border: #1296DB solid thin !important;
			color: #1296DB !important;
			background: url(image/choose.svg) no-repeat 49px 4px;
		}

		.signin {
			width: 3.5em;
			float: right;
			margin-right: 5vw;
		}

		.signin img {
			width: 18px;
			height: 18px;
			float: right;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">课程信息</div>
		<img src="image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div class="course" id="vue-root">
		<div class="course-info">
			<div class="image">
				<img :src="getImg(lesson)">
			</div>
			<div class="info">
				<div class="info-title" v-text="lesson.name"></div>
				<div class="info-hour">共{{lesson.lessonTimes.length}}课时</div>
				<div class="info-num">{{lesson.maxSign}}人/班</div>
				<div>
					<div class="info-state" :class="{conduct:status=='报名已截止',conduct1:status=='接受报名中'}" v-text="status">
					</div>
				</div>
				<div class="info-money">￥{{lesson.fee/100}}</div>
			</div>
		</div>
		<div class="course-teacher">
			<div class="title">授课老师</div>
			<div class="teacher">
				<div class="teacher-name" v-text="lesson.teacherName"></div>
			</div>
		</div>
		<div class="course-details">
			<div class="title">课程详情</div>
			<div class="details">
				<div class="details-title">报名进度：</div>
				<div class="details-info">已报<span class="number" v-text="lesson.signedCount"></span>人</div>
			</div>
			<div class="details">
				<div class="details-title">授课时间：</div>
				<div class="details-info">{{startDate}}至{{endDate}}</div>
			</div>
		</div>
		<div class="choose-meun">
			<div class="choose-title">
				<a @click="chooseId=0" :class="{cur:chooseId===0}">介绍</a>
			</div>
			<div class="choose-title">
				<a @click="chooseId=1" :class="{cur:chooseId===1}">排课</a>
			</div>
			<div class="choose-title" v-if="!isTeacher&&bought">
				<a @click="chooseId=2" :class="{cur:chooseId===2}">签到</a>
			</div>
			<div class="choose-title" v-if="isTeacher">
				<a @click="chooseId=3" :class="{cur:chooseId===3}">名单</a>
			</div>
		</div>
		<div class="pages">
			<div v-show="chooseId===0" v-text="lesson.intro"></div>
			<div v-show="chooseId===1">
				<div class="title">上课安排</div>
				<div class="time" v-for="(time,index) in lesson.lessonTimes" :key="index">
					<div class="time-title">第{{index+1}}课时</div>
					<div class="time-info">{{time.date}} {{getDay(time.date)}} {{time.startTime}}-{{time.endTime}}
						{{time.roomName}}</div>
				</div>
			</div>
			<div v-show="chooseId===2">
				<div class="title">签到详情</div>
				<div class="state" v-for="(time,index) in lesson.lessonTimes" :key="index"
					:class="{abnormal:past(time),normal:(index+1) in attendset}">第{{index+1}}课时</div>
				<p class="tips">温馨提示：绿色是正常打卡签到上课，红色是缺课，灰色是该课时当前还没有开课！</p>
			</div>
			<div v-show="chooseId===3">
				<div class="signin" v-if="isTeacher&&chooseIds.length" @click="punch">
					补签<img src="image/signin12.svg">
				</div>

				<div class="title">
					<select v-model="seq">
						<option :value="undefined" disabled="disabled">请选择课时</option>
						<option v-for="(time,index) in lesson.lessonTimes" :key="index" :value="index+1">第{{index+1}}课时
						</option>
					</select>
				</div>
				<div class="name-list">
					<div class="name " v-for="student in students" :key="student.id" v-text="student.name"
						@click="choose(student)" :class="{abnormal:!(student.id in attendset1),choose:student.checked}">
					</div>
				</div>
			</div>
		</div>
		<a v-if="canSign" :href="'lesson_pay.html?id='+id" target="_top">
			<div class="button">立即报名</div>
		</a>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>
	<script src="/scriptZIP/lodash.core.min.js"></script>

	<script src="/js/common.js"></script>

	<script>

		dayjs.locale('zh-cn');

		var id = params().id;

		var app = new Vue({
			el: '#vue-root',
			data: {
				id: id,
				lesson: {
					lessonTimes: []
				},
				chooseId: 0,
				isTeacher: isTeacher(),
				bought: false,
				canSign: false,
				attends: [],
				students: [],
				seq: null,
				attends1: [],
				schoolId: null
			},
			created: function () {
				var person = getPerson();
				if (person) {
					this.schoolId = person.schoolId;
				} else {
					axios.get('/s/me').then(function (res) {
						this.schoolId = res.data.schoolId;
					}.bind(this));
				}

				function copy(s, t) {
					for (var k in s) Vue.set(t, k, s[k]);
				}
				var prefix = this.isTeacher ? '/t' : '/s';

				axios.get(prefix + '/lesson/' + id).then(function (res) {
					copy(res.data, this.lesson);
					this.getOther();
				}.bind(this));

				axios.get(prefix + '/lesson/detail/' + id).then(function (res) {
					copy(res.data, this.lesson);
					var lesson = this.lesson.lessonTimes;
					var time = dayjs().format('YYYY-MM-DD HH:mm');
					for(var i=1;i<lesson.length;i++) {
						var time1 = lesson[i].date + ' ' + lesson[i].startTime;
						this.seq = lesson.length;
						if (time1 > time) {
							this.seq = i;
							break;
						}
					}
				}.bind(this));

				if (location.hash == '#time') {
					this.chooseId = 2;
				}
			},
			methods: {
				getImg: function (item) {
					if (!item.pic) return '/wechat/image/lesson.svg';
					return '/static/' + this.schoolId + '/lesson/' + item.pic;
				},
				getDay: function (date) {
					return dayjs(date).format('dddd');
				},
				getOther: function () {
					if (this.isTeacher) {
						axios.get('/t/lesson/bought/' + id).then(function (res) {
							this.students = res.data;
						}.bind(this));
					} else {
						axios.get('/s/lesson/bought/' + id).then(function (res) {
							this.bought = res.data;
							if (this.bought) {
								axios.get('/s/lesson/punch/' + id).then(function (res) {
									this.attends = res.data;
								}.bind(this));
								return;
							}
							axios.get('/s/lesson/can/' + id).then(function (res) {
								this.canSign = res.data;
							}.bind(this));
						}.bind(this));
					}
				},
				past: function (lessonTime) {
					return dayjs(lessonTime.date + ' ' + lessonTime.endTime, 'YYYY-MM-DD HH:mm').isBefore(dayjs());
				},
				choose: function (student) {
					if (this.seq === null) {
						alert('请选择课时');
						return;
					}
					if (student.id in this.attendset1) return;
					Vue.set(student, 'checked', !student.checked);
				},
				punch: function () {
					axios.post('/t/lesson/punch/' + id + '/' + this.seq, this.chooseIds).then(function (res) {
						alert('补签成功');
						location.reload();
					});
				}
			},
			computed: {
				chooseIds: function () {
					return this.students.filter(function (it) {
						return it.checked;
					}).map(function (it) {
						return it.id;
					});
				},
				signing: function () {
					if (!this.lesson.signEndTime) return false;
					return dayjs().isBefore(dayjs(this.lesson.signEndTime));
				},
				dates: function () {
					return _.map(this.lesson.lessonTimes, 'date');
				},
				startDate: function () {
					return _.min(this.dates);
				},
				endDate: function () {
					return _.max(this.dates);
				},
				attendset: function () {
					return toSet(this.attends);
				},
				attendset1: function () {
					return toSet(this.attends1);
				},
				status: function () {
					if (this.bought) return '已报名';
					return this.signing ? '接受报名中' : '报名已截止';
				}
			},
			watch: {
				seq: function (newValue, oldValue) {
					if(!newValue) return;
					axios.get('/t/lesson/punch/' + id + '/' + newValue).then(function (res) {
						this.attends1 = res.data;
					}.bind(this));
				}
			}
		})
	</script>
</body>

</html>